{% extends 'base.html' %}
{% load static %}
{% load custom_filters %}
{% load humanize %}

{% block content %}
<style>
  .metadata-table {
    font-size: 1.5rem !important;
  }

  .metadata-table th {
    font-size: 1.5rem !important;
    background-color: rgb(80, 90, 97) !important;
    border-color: rgb(70, 80, 87);
  }

  .metadata-table td {
    font-size: 1.5rem !important;
  }

  .table .table-dark th {
    background-color: rgb(80, 90, 97) !important;
    border-color: rgb(70, 80, 87);
    font-size: 1.3rem;
  }

  .table td {
    font-size: 1.2rem;
  }

  .actions {
    display: flex;
    gap: 5px;
    align-items: center;
  }

  .actions form {
    margin: 0;
    padding: 0;
    display: inline;
  }

  .table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 0;
  }

  .table {
    table-layout: fixed;
    width: 100%;
  }

  .card {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .table-container {
    width: 100%;
    overflow-x: auto;
  }

  .table th:nth-child(1),
  .table td:nth-child(1) {
    width: 3%;
  }

  .table th:nth-child(2),
  .table td:nth-child(2) {
    width: 20%;
  }

  .table th:nth-child(3),
  .table td:nth-child(3) {
    width: 30%;
  }

  .table th:nth-child(4),
  .table td:nth-child(4) {
    width: 15%;
    text-align: right;
  }

  .table th:nth-child(5),
  .table td:nth-child(5) {
    width: 10%;
    text-align: right;
  }

  .table th:nth-child(6),
  .table td:nth-child(6) {
    width: 5%;
    text-align: right;
  }

  /* Menyesuaikan lebar kolom tabel metadata */
  .metadata-table th:nth-child(1),
  .metadata-table td:nth-child(1) {
    width: 20%;
  }

  .metadata-table th:nth-child(2),
  .metadata-table td:nth-child(2) {
    width: 50%;
  }

  .metadata-table th:nth-child(3),
  .metadata-table td:nth-child(3) {
    width: 15%;
  }

  .metadata-table th:nth-child(4),
  .metadata-table td:nth-child(4) {
    width: 15%;
  }

  /* Hide the actual file input */
  #excel_upload {
    display: none;
  }

  /* Style the file path textbox */
  #excel_file_path {
    width: 800px;
    /* Double the width */
    padding: 6px 12px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  /* Add space after the "Choose File" button */
  label[for='excel_upload'] {
    margin-right: 10px;
  }

  /* Align form elements vertically */
  form[enctype='multipart/form-data'] {
    display: flex;
    align-items: center;
  }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
  <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Journal Entry</h2>
  <div>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newJournalModal">New
      Journal</button>
    <a href="{% url 'generate_pdf' %}" class="btn btn-secondary">Generate PDF</a>
    <a href="{% url 'export_excel' %}" class="btn btn-success">Export to Excel</a>
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#addEntryModal">Add
      Item</button>
  </div>
</div>

<div class="table-container">
  <table class="table table-bordered table-striped metadata-table" style="border-collapse: collapse; width: 100%;">
    <thead class="table-dark">
      <tr>
        <th scope="col">Ref. No</th>
        <th scope="col">Date</th>
        <th scope="col" style="text-align: right;">Currency</th>
        <th scope="col">Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{ ref_no }}</td>
        <td>{{ date }}</td>
        <td style="text-align: right;">{{ currsign }}</td>
        <td>{{ rate|format_rupiah }}</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-container">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th scope="col">No</th>
        <th scope="col">Account No</th>
        <th scope="col">Description</th>
        <th scope="col">IDR Amount</th>
        <th scope="col">USD Amount</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for journal in journals %}
      <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ journal.acct_no|format_acct_no }}</td>
        <td>{{ journal.descript }}</td>
        <td class="text-end">{{ journal.idramt|format_rupiah }}</td>
        <td class="text-end">{{ journal.usdamt|format_usd }}</td>
        <td class="d-inline-flex gap-2">
          <a href="{% url 'edit_journal_entry' journal.id %}" class="btn btn-sm btn-secondary"><i
                class="bi bi-pencil"></i></a>
          <form method="post" action="{% url 'delete_journal_entry' journal.id %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-sm btn-danger"
                onclick="return confirm('Are you sure you want to delete this entry?')"><i
                  class="bi bi-trash"></i></button>
          </form>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="6" class="text-center">No journal entries found</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div style="margin-top: 20px;">
  <h2>Upload Excel</h2>
  <form method="post" enctype="multipart/form-data" action="{% url 'upload_excel' %}">
    {% csrf_token %}
    <label for="excel_upload" class="btn btn-secondary">Choose File</label>
    <input type="file" name="excel_file" id="excel_upload" accept=".xlsx, .xls" />
    <input type="text" id="excel_file_path" readonly placeholder="No file chosen" />
    <button type="submit" class="btn btn-secondary">Upload Excel</button>
  </form>
</div>

<div class="modal fade" id="newJournalModal" tabindex="-1" aria-labelledby="newJournalModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newJournalModalLabel">New Journal Entry</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="newJournalForm" method="post" action="{% url 'create_new_journal_header' %}">
          {% csrf_token %}
          <div class="row mb-3">
            <div class="col-md-3">
              <label for="jvcode_new" class="form-label">JV Code</label>
              <select class="form-select" id="jvcode_new" name="jvcode" required>
                <option value="" selected disabled>Select JV Code</option>
                {% for jv in jv_codes %}
                <option value="{{ jv.jvcode }}">{{ jv.jvcode }} - {{ jv.jvname }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3">
              <label for="date_new" class="form-label">Date</label>
              <input type="date" class="form-control" id="date_new" name="date" value="{{ default_date|date:'Y-m-d' }}"
                  required />
            </div>
            <div class="col-md-2">
              <label for="currsign_new" class="form-label">Currency</label>
              <input type="text" class="form-control" id="currsign_new" name="currsign"
                  value="{{ default_currsign }}" />
            </div>
            <div class="col-md-2">
              <label for="rate_new" class="form-label">Rate</label>
              <input type="text" class="form-control" id="rate_new" name="rate" value="{{ default_rate }}" />
            </div>
          </div>
          <div class="mb-3">
            <label for="acct_no_new" class="form-label">Account No</label>
            <select class="form-select" id="acct_no_new" name="acct_no" required>
              <option value="" selected disabled>Select Account</option>
              {% for account in accounts %}
              <option value="{{ account.acct_no }}">{{ account.acct_no }} - {{ account.acct_name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label for="descript_new" class="form-label">Description</label>
            <textarea class="form-control" id="descript_new" name="descript" rows="2"></textarea>
          </div>
          <div class="row mb-3">
            <div class="col-md-3">
              <label for="idramt_new" class="form-label">IDR Amount</label>
              <input type="text" class="form-control" id="idramt_new" name="idramt" />
            </div>
            <div class="col-md-3">
              <label for="usdamt_new" class="form-label">USD Amount</label>
              <input type="text" class="form-control" id="usdamt_new" name="usdamt" />
            </div>
          </div>
          <button type="submit" class="btn btn-primary">Create Journal</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="addEntryModal" tabindex="-1" aria-labelledby="addEntryModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addEntryModalLabel">Add New Journal Item</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addJournalForm" method="post" action="{% url 'add_journal_item' %}">
          {% csrf_token %}
          <div class="mb-3" style="display: none;">
            <label for="ref_no_modal" class="form-label">Ref. No</label>
            <input type="text" class="form-control" id="ref_no_modal" name="ref_no" value="{{ ref_no }}" readonly />
          </div>
          <div class="mb-3" style="display: none;">
            <label for="date_modal" class="form-label">Date</label>
            <input type="date" class="form-control" id="date_modal" name="date" value="{{ date }}" readonly required />
          </div>
          <div class="mb-3" style="display: none;">
            <label for="currsign_modal" class="form-label">Currency</label>
            <input type="text" class="form-control" id="currsign_modal" name="currsign_modal" value="{{ currsign }}"
                readonly />
          </div>
          <div class="mb-3" style="display: none;">
            <label for="rate_modal" class="form-label">Rate</label>
            <input type="text" class="form-control" id="rate_modal" name="rate_modal" value="{{ rate }}" readonly />
          </div>
          <div class="mb-3">
            <label for="acct_no_modal" class="form-label">Account No</label>
            <select class="form-select" id="acct_no_modal" name="acct_no" required>
              <option value="" selected disabled>Select Account</option>
              {% for account in accounts %}
              <option value="{{ account.acct_no }}">{{ account.acct_no }} - {{ account.acct_name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="mb-3">
            <label for="descript_modal" class="form-label">Description</label>
            <textarea class="form-control" id="descript_modal" name="descript" rows="3" required></textarea>
          </div>
          <div class="mb-3">
            <label for="idramt_modal" class="form-label">IDR Amount</label>
            <input type="text" class="form-control" id="idramt_modal" name="idramt_modal" />
          </div>
          <div class="mb-3">
            <label for="usdamt_modal" class="form-label">USD Amount</label>
            <input type="text" class="form-control" id="usdamt_modal" name="usdamt_modal" />
          </div>
          <button type="submit" class="btn btn-primary">Save Entry</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script>
  $(document).ready(function () {
    // Masking for New Journal Form
    $('#idramt_new').mask('#.##0', { reverse: true })
    $('#debet_new').mask('#.##0', { reverse: true })
    $('#credit_new').mask('#.##0', { reverse: true })
    $('#usdamt_new').mask('#,##0.00', { reverse: true })

    // Masking for Add Item Modal Form
    $('#idramt_modal').mask('#.##0', { reverse: true })
    $('#usdamt_modal').mask('#,##0.00', { reverse: true })

    // Automatic USD calculation in New Journal Modal
    $('#idramt_new, #debet_new, #credit_new').on('input', function () {
      var currsign = $('#currsign_new').val()
      var rate = parseFloat($('#rate_new').val())
      var idrAmount = parseFloat($(this).val().replace(/\./g, '').replace(',', '.')) || 0
      var usdamtInput = $('#usdamt_new')

      if (currsign === 'IDR' && !isNaN(rate)) {
        var calculatedUsdamt = idrAmount / rate
        usdamtInput.val(calculatedUsdamt.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }))
      } else if (currsign !== 'IDR') {
        usdamtInput.prop('readonly', false)
      } else {
        usdamtInput.val('')
        usdamtInput.prop('readonly', true)
      }
    })

    $('#currsign_new, #rate_new').on('change input', function () {
      $('#idramt_new').trigger('input')
      $('#debet_new').trigger('input')
      $('#credit_new').trigger('input')
    })

    if ($('#currsign_new').val() === 'IDR') {
      $('#usdamt_new').prop('readonly', true)
    } else {
      $('#usdamt_new').prop('readonly', false)
    }

    // Automatic USD calculation in Add Item Modal BEFORE SUBMIT
    $('#idramt_modal, #rate_modal').on('input', function () {
      var idrAmountModal = parseFloat($('#idramt_modal').val().replace(/\./g, '').replace(',', '.')) || 0
      var rateModal = parseFloat($('#rate_modal').val()) || 0
      var usdamtInputModal = $('#usdamt_modal')

      if (rateModal > 0) {
        var calculatedUsdamtModal = idrAmountModal / rateModal
        usdamtInputModal.val(calculatedUsdamtModal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }))
      } else {
        usdamtInputModal.val('')
      }
    })

    // AJAX submission for the Add Journal Item Form
    $('#addJournalForm').on('submit', function (event) {
      event.preventDefault()

      var form = $(this)
      var formData = form.serialize()

      // Clean idramt_modal before sending
      var idrAmountClean = $('#idramt_modal').val().replace(/\./g, '')
      form.find('input[name="idramt_modal"]').val(idrAmountClean)
      formData = form.serialize() // Re-serialize after cleaning

      console.log('Form Data being sent:', formData)

      $.ajax({
        url: form.attr('action'),
        method: 'POST',
        data: formData,
        dataType: 'json',
        success: function (data) {
          if (data.success) {
            $('#usdamt_modal').val(data.new_item.usdamt.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }))
            $('#acct_no_modal').val('').trigger('change')
            $('#descript_modal').val('')
            $('#idramt_modal').val('')
            $('#addEntryModal').modal('hide')
            window.location.reload()
          } else {
            alert('Error adding item: ' + data.error)
          }
        },
        error: function (xhr, textStatus, errorThrown) {
          alert('Network error: ' + errorThrown)
        }
      })
    })
  })
</script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const fileInput = document.getElementById("excel_upload");
    const filePathField = document.getElementById("excel_file_path");

    fileInput.addEventListener("change", function () {
      if (fileInput.files.length > 0) {
        filePathField.value = fileInput.files[0].name;
      } else {
        filePathField.value = "No file chosen";
      }
    });
  });
</script>
{% endblock %}